// vue-router-ex-2 index.js
import Vue from 'vue/dist/vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
// import personal-center from '@/components/personal-center.vue'
import personalCenter from '@/components/personal-center.vue'
import accountBalance from '@/components/account-balance.vue'
import personalInfo from '@/components/personal-info.vue'
import transactionHistory from '@/components/transaction-history.vue'
import modifyPassword from '@/components/modify-password.vue'
import bankCars from '@/components/bank-cars.vue'
import Register from '@/components/Register.vue'
Vue.use(Router)
// 1. 定义（路由）或导入组件
const Home = {
    template: `
            <div class="adimg1">
        <div class="home-container">
            <!-- 新增的广告图片区 -->
            <div class="featured-ad">
                <img :src="img3" alt="Featured Ad Image"/>
                <p>{{ featuredAdText }}</p>
            </div>

            <!-- 主横幅区 -->
            <div class="main-banner">
                <ul>
                    <li v-for="(banner, index) in banners" :key="index" class="banner-item">
                        <a :href="banner.href" target="_blank" class="banner-link">
                            <img :src="banner.imgSrc" :width="banner.width" :height="banner.height" alt="Banner Image" class="banner-img"/>
                            <span class="banner-name">{{ banner.name }}</span>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 广告图片区 -->
            <div class="ad-images">
                <div class="im1">
                </div>
            </div>
        </div>
    </div>
    `,
	data() {
        return {
            img1: 'https://img.alicdn.com/tfs/TB1Zv_6kKuSBuNjSszbXXcS7FXa-1920-1080.jpg',
            img2: 'https://img.alicdn.com/tfs/TB1Zv_6kKuSBuNjSszbXXcS7FXa-1920-1080.jpg', // Placeholder image URL
            img3: require('./images/zs2.jpg'), // Assuming this is a local file path for Webpack or similar module bundler
            featuredAdText: '  ', // 描述新增广告的文字
            banners: [
                {
                    imgSrc: "https://s3gw.cmbimg.com/lb50.01-cmbweb-prd/cmbcms/20241009/70ada87e-1cf6-499d-be27-9515444ceeb9.png",
                    width: 732,
                    height: 130,
                    name: "招商银行信用卡",
                    href: "http://cc.cmbchina.com"
                },
                {
                    imgSrc: "https://s3gw.cmbimg.com/lb50.01-cmbweb-prd/cmbcms/20240419/d37ad399-30dd-4ba7-ba72-dbcf5684c3e8.png",
                    width: 732,
                    height: 130,
                    name: "境外来华人员支付服务指南",
                    href: "https://market.cmbchina.com/MPage/online/240416094626104/psg/psg.html"
                },
                {
                    imgSrc: "http://images.cmbchina.com/cmbadv/202104/0339f3da-1237-4057-9732-bc4a0af667b5.PNG",
                    width: 732,
                    height: 10,
                    name: "存款保险",
                    href: "https://market.cmbchina.com/MPage/online/210305164726891/cunkuanbaoxian/index.html"
                },
                {
                    imgSrc: "https://s3gw.cmbimg.com/lb50.01-cmbweb-prd/cmbcms/20240930/6c1333ab-0bc4-4c63-8a2e-2c12db8ef910.png",
                    width: 732,
                    height: 130,
                    name: "消费者权益保护",
                    href: "https://www.cmbchina.com/CmbInfo/crp/"
                }
            ]
        };
    }
};
const Advantage = {
    template: `
        <div>
            <div class="adimg1">
                <div class="home-container">
                    <!-- 新增的广告图片区 -->
                    <div class="featured-ad">
                        <img :src="img1" class="ad-image" alt="Featured Ad Image"/>
                        <p>{{ featuredAdText }}</p>
                    </div>
					<div>
                <div style="font-size: 40px; color: #4b4b4b; font-weight: 700; height: 46px" id="sunflower_title">ESG信息披露</div>
                 <div style="width:87px;height:8px;background-color:#a30030;"></div>
                 <div style="margin-top:40px">
                     <div style="width:370px;display:inline-block;margin:0 40px 50px 0">
                         <div style="width:0px;height:125px;border:1px solid;border-color:#707070;display:inline-block"></div>
                         <div style="display:inline-block;vertical-align:top;margin:18px 0 0 10px">
                             <div style="color:#666666;font-size:30px;font-weight:700">ESG治理架构</div>
                             <div style="font-weight:500;color:#666666;font-size:20px;margin:15px 0">ESG Governance Structure</div>
                             <div><a href="https://cmbchina.com/esg/structure/" style="cursor:pointer"><span style="color:#a30030;font-size:18px;font-weight:700;">点击进入</span><span style="background:url(/Images/ESG/arrow.png);width:13px;height:10px;display:inline-block;margin:0 0 0 5px"></span></a></div>
                         </div>
                         <div>
                             <img src="https://cmbchina.com/Images/ESG/structure.png" style="">
                         </div>
                     </div>
                      <div style="width:370px;display:inline-block;margin:0 40px 50px 0">
                         <div style="width:0px;height:125px;border:1px solid;border-color:#707070;display:inline-block"></div>
                         <div style="display:inline-block;vertical-align:top;margin:18px 0 0 10px">
                             <div style="color:#666666;font-size:30px;font-weight:700">ESG相关报告</div>
                             <div style="font-weight:500;color:#666666;font-size:20px;margin:15px 0">ESG Related Reports</div>
                             <div><a href="https://cmbchina.com/esg/report/" style="cursor:pointer"><span style="color:#a30030;font-size:18px;font-weight:700;">点击进入</span><span style="background:url(/Images/ESG/arrow.png);width:13px;height:10px;display:inline-block;margin:0 0 0 5px"></span></a></div>
                         </div>
                         <div>
                             <img src="	https://cmbchina.com/Images/ESG/reports.png" style="">
                         </div>
                     </div>
                     <div style="width:370px;display:inline-block;margin:0 0 50px 0">
                         <div style="width:0px;height:125px;border:1px solid;border-color:#707070;display:inline-block"></div>
                         <div style="display:inline-block;vertical-align:top;margin:18px 0 0 10px">
                             <div style="color:#666666;font-size:30px;font-weight:700">ESG制度与倡议</div>
                             <div style="font-weight:500;color:#666666;font-size:20px;margin:15px 0">ESG Policies and Initiatives</div>
                             <div><a href="https://cmbchina.com/esg/advocacy/" style="cursor:pointer"><span style="color:#a30030;font-size:18px;font-weight:700;">点击进入</span><span style="background:url(/Images/ESG/arrow.png);width:13px;height:10px;display:inline-block;margin:0 0 0 5px"></span></a></div>
                         </div>
                         <div>
                             <img src="	https://cmbchina.com/Images/ESG/policy.png" style="">
                         </div>
                     </div>
                     <div style="width:370px;display:inline-block;margin:0 40px 50px 0">
                         <div style="width:0px;height:125px;border:1px solid;border-color:#707070;display:inline-block"></div>
                         <div style="display:inline-block;vertical-align:top;margin:18px 0 0 10px">
                             <div style="color:#666666;font-size:30px;font-weight:700">ESG动态</div>
                             <div style="font-weight:500;color:#666666;font-size:20px;margin:15px 0">ESG Events</div>
                             <div><a href="https://cmbchina.com/esg/trends/" style="cursor:pointer"><span style="color:#a30030;font-size:18px;font-weight:700;">点击进入</span><span style="background:url(/Images/ESG/arrow.png);width:13px;height:10px;display:inline-block;margin:0 0 0 5px"></span></a></div>
                         </div>
                         <div>
                             <img src="	https://cmbchina.com/Images/ESG/trends.png" style="">
                         </div>
                     </div>
                     <div style="width:370px;display:inline-block;margin:0 40px 50px 0">
                         <div style="width:0px;height:125px;border:1px solid;border-color:#707070;display:inline-block"></div>
                         <div style="display:inline-block;vertical-align:top;margin:18px 0 0 10px">
                             <div style="color:#666666;font-size:30px;font-weight:700">公益慈善平台</div>
                             <div style="font-weight:500;color:#666666;font-size:20px;margin:15px 0">Public Welfare and Charity Platform</div>
                             <div><a href="https://cmbchina.com/esg/gongyi/" style="cursor:pointer"><span style="color:#a30030;font-size:18px;font-weight:700;">点击进入</span><span style="background:url(/Images/ESG/arrow.png);width:13px;height:10px;display:inline-block;margin:0 0 0 5px"></span></a></div>
                         </div>
                         <div>
                             <img src="https://s3gw.cmbimg.com/lb50.01-cmbweb-prd/cmbcms/20240904/fc9f866c-4f51-41d2-ab97-5e43d7dac825.png" style="">
                         </div>
                     </div>
                 </div>

            </div>
    `,
    data() {
        return {
            img1: require('./images/zs3.jpg'),
        };
    }
};
// 定义二级导航路由
const Product = {
	template: `<div>
	<p class="subrouter">
	<router-link class="r-link2" to = "/product/gaiyao" >一卡通</router-link>
	<router-link class="r-link2" to = "/product/sousuo" >金葵花理财</router-link>
	<router-link class="r-link2" to = "/product/feed" >私人银行</router-link>
	<router-link class="r-link2" to = "/product/juping" >个人贷款</router-link>
	<router-link class="r-link2" to = "/product/kaiping" >储蓄业务</router-link>
	<router-link class="r-link2" to = "/product/ivy"> 居家生活</router-link>
	</p>
	<router-view  > </router-view>
	</div >`
}
const Gaiyao = {
	template: ` <div class="container">	 
		  <div class="subrouter-left">
			<h1>一卡通</h1>
	  	<p>一卡通不仅是一张借记卡，更是集多种金融功能和服务于一体的综合型银行卡，
旨在为用户提供便捷、安全、高效的金融服务体验。</p>
			</div>
	    <div class="subrouter-right"><p><img :src="img1"/></p></div>
		</div>`,
	data() {
		return {
			img1: require('./images/111.jpg')
		}
	}
}
const Sousuo = {
	template: ` <div class="container">	 
		  <div class="subrouter-left">
			<h1>金葵花理财</h1>
	  	<p>金葵花理财服务通过提供丰富的金融服务、优惠的费率政策、专属的理财服务、
		高端的生活服务、全球服务网络、安全保障措施以及积分回馈机制，为客户提供了全方位的金融服务和生活便利。
		这些服务不仅满足了客户的日常金融需求，还帮助客户实现了财富的增值和生活质量的提升。</p>
			</div>
	    <div class="subrouter-right"><img :src="img1"/></div>
		</div>`,
	data() {
		return {
			img1: require('./images/222.jpg')
		}
	}
}
const Feed = {
	template: `<div class="container">
	<div class="subrouter-left">
	<h1>私人银行</h1>
	<p>招商银行私人银行服务不仅提供专业的财富管理，还涵盖了广泛的增值服务，旨在为高净值客户提供全方位、高品质的金融服务体验。</p>
</div>
<div class="subrouter-right"><img :src="img2"/></div>
</div>`,
	data() {
		return {
			img2: require('./images/333.jpg')
		}
	}
}
const Juping = {
	template: `<div class="container">
	<div class="subrouter-left">
	<h1>个人贷款</h1>
  <p>个人贷款产品种类丰富，能够满足不同客户的各种资金需求。无论是购房、购车、装修、教育还是日常消费，都能找到合适的贷款产品。通过招商银行的个人贷款服务，客户可以轻松获得所需资金，实现自己的目标和梦想。</p>
</div>
 <div class="subrouter-right"><img :src="img3"/></div>
	</div>`,
	data() {
		return {
			img3: require('./images/444.jpg')
		}
	}
}
const Kaiping = {
	template: `<div class="container">
	 <div class="subrouter-left">
	<h1>储蓄业务</h1>
	<p>储蓄业务不仅为客户提供了一个安全、便捷的资金管理平台，还提供了丰富的增值服务，帮助客户实现资金的保值增值。无论是日常的现金管理还是长期的财富规划，招商银行的储蓄业务都能满足不同客户的需求。</p>
	 </div>
	 <div class="subrouter-right"><img :src="img4"/></div>
	</div>`,
	data() {
		return {
			img4: require('./images/555.jpg')
		}
	}
}
const Ivy = {
	template: `<div class="container">
	 <div class="subrouter-left">
	<h1>居家生活</h1>
	<p>居家生活服务通过整合多种生活场景和金融服务，为客户提供了一个全方位、一站式的线上服务平台。无论是日常生活缴费、购物消费，还是健康医疗、娱乐休闲，都能在这里找到便捷的解决方案，极大地提升了客户的生活质量和便利性。</p>
	 </div>
	 <div class="subrouter-right"><img :src="img4"/></div>
	</div>`,
	data() {
		return {
			img4: require('./images/666.jpg')
		}
	}
}
const Case = {
	template: `<div class="adimg2"><p><img :src="img3"/></p>
	<div id="column_main_news">
                
<div class="center_con_news">
    <div class="news_head">
        <div class="head_left" style="font-size:19px;">招行新闻</div>
        <div class="news_more">
            <a target="_blank" href="https://cmbchina.com/cmbinfo/news/" cname="招行新闻--cmbinfo" oname="更多" otype="文字链接" style="color:#999999;"><span>查看更多</span><i></i></a></div>
    </div>
    <div class="center_con_newsinfo">
        <div class="news_list">
            <ul>
                
                        <li>
                            <div style="float:left;width:8px;height:8px;background-color:#A70B39;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%; margin: 16px 18px 0 0"></div>
                            <div style="float:left;line-height:40px">
                                <a target="_blank" title="服务外贸企业更快捷 招行名录登记服务再升级" href="/cmbinfo/news/newsinfo.aspx?guid=00b09cb4-4b7b-4cf2-890c-1dfd8a3a8f19" cname="招行新闻--cmbinfo" oname="服务外贸企业更快捷 招行名录登记服务再升级" otype="文字链接">
                                服务外贸企业更快捷 招行名录登记服务再升级</a>                                
                            </div>
                            <div style="float:right;width:120px;height:30px;font-size:14px;color:#333333;text-align: right;">
                                2024-12-16
                            </div>
                        </li>
                    
                        <li>
                            <div style="float:left;width:8px;height:8px;background-color:#A70B39;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%; margin: 16px 18px 0 0"></div>
                            <div style="float:left;line-height:40px">
                                <a target="_blank" title="用好政策 打通堵点 招商银行积极助力城市房地产融资协调机制高效落地" href="/cmbinfo/news/newsinfo.aspx?guid=ce7c6845-f7a7-4df4-93d6-983194c902c4" cname="招行新闻--cmbinfo" oname="用好政策 打通堵点 招商银行积极助力城市房地产融资协调机制高效落地" otype="文字链接">
                                用好政策 打通堵点 招商银行积极助力城市房地产融资协调机制高...</a>                                
                            </div>
                            <div style="float:right;width:120px;height:30px;font-size:14px;color:#333333;text-align: right;">
                                2024-11-29
                            </div>
                        </li>
                    
                        <li>
                            <div style="float:left;width:8px;height:8px;background-color:#A70B39;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%; margin: 16px 18px 0 0"></div>
                            <div style="float:left;line-height:40px">
                                <a target="_blank" title="金葵向阳，服务全球——招商银行参展Sibos 2024大会" href="/cmbinfo/news/newsinfo.aspx?guid=ee6e4605-3146-479e-bdfd-b5436f86d0aa" cname="招行新闻--cmbinfo" oname="金葵向阳，服务全球——招商银行参展Sibos 2024大会" otype="文字链接">
                                金葵向阳，服务全球——招商银行参展Sibos 2024大会</a>                                
                            </div>
                            <div style="float:right;width:120px;height:30px;font-size:14px;color:#333333;text-align: right;">
                                2024-10-22
                            </div>
                        </li>
                    
                        <li>
                            <div style="float:left;width:8px;height:8px;background-color:#A70B39;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%; margin: 16px 18px 0 0"></div>
                            <div style="float:left;line-height:40px">
                                <a target="_blank" title="招商银行落地市场第一批上市公司股票回购增持贷款业务" href="/cmbinfo/news/newsinfo.aspx?guid=2dc4e153-be76-497d-ad48-139913a31783" cname="招行新闻--cmbinfo" oname="招商银行落地市场第一批上市公司股票回购增持贷款业务" otype="文字链接">
                                招商银行落地市场第一批上市公司股票回购增持贷款业务</a>                                
                            </div>
                            <div style="float:right;width:120px;height:30px;font-size:14px;color:#333333;text-align: right;">
                                2024-10-21
                            </div>
                        </li>
                    
                        <li>
                            <div style="float:left;width:8px;height:8px;background-color:#A70B39;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%; margin: 16px 18px 0 0"></div>
                            <div style="float:left;line-height:40px">
                                <a target="_blank" title="招商银行深入开展“担当新使命 消保县域行”专项活动" href="/cmbinfo/news/newsinfo.aspx?guid=ce72ff8d-b3a1-4964-b01b-be1de7a165bb" cname="招行新闻--cmbinfo" oname="招商银行深入开展“担当新使命 消保县域行”专项活动" otype="文字链接">
                                招商银行深入开展“担当新使命 消保县域行”专项活动</a>                                
                            </div>
                            <div style="float:right;width:120px;height:30px;font-size:14px;color:#333333;text-align: right;">
                                2024-09-27
                            </div>
                        </li>
                    
            </ul>
        </div>
    </div>
</div>
<div class="connews_img">
    <img src="https://cmbchina.com/images/cmbnews2020.png">
</div>
            </div>
	</div>`,
	data() {
		return {
			img3: require('./images/zs4.jpg'),
		}
	}
}
const More = {
    template: `
        <div class="adimg3">
            <img :src="img4" class="responsive-image" alt="Ad Image"/>
        </div>
    `,
    data() {
        return {
            img4: require('./images/zs5.jpg')
        };
    }
};
// 2. 定义路由,每个路由应该映射一个组件。 
const routes = [{
		path: '/home',
		component: Home,
		name: 'Home'
	},
	{
		path: '/advantage',
		name: 'Advantage',
		component: Advantage
	},
	{
		path: '/product',
		component: Product,
		//以下定义子路由
		children: [{ //默认的空子路由
				path: '',
				component: Gaiyao
			},
			{
				path: 'gaiyao',
				component: Gaiyao
			},
			{
				path: 'sousuo',
				component: Sousuo
			},
			{
				path: 'feed',
				component: Feed
			},
			{
				path: 'juping',
				component: Juping
			},
			{
				path: 'kaiping',
				component: Kaiping
			},
			{
				path: 'ivy',
				component: Ivy
			},
		]
	},
	{
		path: '/case',
		name: 'Case',
		component: Case
	},
	{
		path: '/help',
		name: 'More',
		component: More
	},
	{
		path: '/register',
		name: 'Register',
		component: Register,
	},
	{ 
		path: '/login', 
		component: Login, 
		name: 'LoginLogin',
		// props: (route) => ({ id: route.params.userid}) 
	},
	{ //匹配不到路由时重定向到首页
		path: '/',
		redirect: '/home'
	},
	{
		path: '/transaction',
		
		component: transactionHistory
	},
	{
		path: '/bank',
		
		component: bankCars
	},
	{
		path: '/personal-center',
		name: 'personalcenter',
		component: personalCenter,
		children:[{
			path: '/info',
			
			component: personalInfo
		},
		{
			path: '/balance',
			
			component: accountBalance
		},
		{
			path: '/password',
			
			component: modifyPassword
		}
		,
		{
			path: '/cars',
			
			component: bankCars
		},
		]
	},
	
]
// 3. 创建 router 实例，然后传 `routes` 配置
export default new Router({
	routes: routes,
	mode: 'history', //去掉URL中的#	
})